import React from "react";
import { RankStatus } from "../../../../../interface/RankInfo.ts";
import { Card } from "antd";
import style from "./RankItem.module.scss";
interface RankProps {
  rank: RankStatus;
}
const RankItem: React.FC<RankProps> = (props: RankProps) => {
  const { rank } = props;
  return (
    <div className={style.RankItem}>
      <Card title={<div className={style.title}>{rank.name}</div>} size="small">
        <div className={style.cardCon}>
          <div className={style.tier}>
            <img alt="" src={rank.rankIcon} />
          </div>
          <div className={style.rankRateCard}>
            <div className={style.rank}>
              <p>{`${rank.rankTier} ${rank.rankDivision}`}</p>
              <p>{rank.Lp}胜点</p>
            </div>
            <div className={style.winRate}>
              <p>
                {rank.Win}胜-{rank.Lose}负
              </p>
              <p>胜率{rank.winRate}%</p>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default RankItem;
